<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/11/19
  Time: 14:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<%--添加表单--%>
<form class="layui-form" style="display: none" lay-filter="go" id="d"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
            <input type="text" name="price" placeholder="请输入年龄" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="go">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<button type="button" class="layui-btn" id="c">添加</button>
    <table id="demo" lay-filter="test"></table>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
    <script>
        layui.use('table',function(){
            var table = layui.table;
            //页面分页的表格
            table.render({
                elem: '#demo',
                url:"${pageContext.request.contextPath}/students",
                limit:3,
                limits:[2,3,4,5,6]
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID'}
                    ,{field: 'name', title: '姓名'}
                    ,{field: 'age', title: '年龄'}
                    ,{title: '操作', toolbar:'#barDemo'}
                ]]
            });
            table.on('tool(test)',function () {
                var data = obj.data;//获取当前行的数据
                var layEvent = obj.event//获得lay-event对应的值
                if (layEvent==="edit"){//编辑

                }else if (layEvent=="del"){
                    layer.confirm("是否确认删除？",function(index){
                        layer.close(index);
                        //alert("点击了删除按钮，要删除id为"+data.id+"的这条数据");
                        //1.调用ajax删除数据库里面的数据。
                        $.ajax({
                            url:"stu/del.do",
                            data:"id="+data.id,
                            dataType:"json",
                            success:function(data){
                                //2.重新加载table表格
                                table.reload("stuTable",{
                                    done:function(res,curr,count){
                                        //删除后可以判断是否有数据，没有数据的话从上一页获取数据展示
                                        if(res.data.length==0&&curr!==1){
                                            table.reload("stuTable",{page:{curr:curr-1}});
                                        }
                                    }
                                });
                                //3.给出删除成功的提示。
                                layer.msg("删除成功！");
                            }
                        });
                    });
                }
            })
            form.on("submit(go)",function(obj){
                var json=obj.field
                //发出ajax请求
                $.ajax({
                    url:"students",
                    type:"post",
                    data:JSON.stringify(json),
                    contentType:"application/json",
                    success:function(){
                        //关闭弹出层
                        layer.closeAll();
                        //清空表单中的数据
                        $("form").get(0).reset();
                        //刷新table表格
                        table.reload("demo1");
                    }
                });
                return false;
            })
        });
    </script>
    <%--绑定按钮--%>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
        <script type="text/javascript">
            $("#c").click(function(){
                layer.open({
                    type:1,
                    title:"添加学生页面",
                    content:$("form"),
                    area: ['500px', '500px']
                });
            });
    </script>
</body>
</html>
